<template>
  <div class="toolbarConfig">
    <h4>微件配置</h4>
    <div class="list">
      <p>是否显示文字：</p>
      <!-- <span
        class="cilckR"
        @click="config.hideTitle = !config.hideTitle"
        :class="{ active: config.hideTitle }"
      ></span> -->
      <!-- Switch开关 -->
      <el-switch
        :width="31"
        v-model="value1"
        active-text="展开"
        inactive-text="收起"
      >
      </el-switch>
    </div>
    <!-- 树形穿梭框 -->
    <tree-transfer
      :title="['目标', '来源']"
      :button_text="['删除', '添加']"
      :from_data="fromData"
      :to_data="toData"
      :defaultProps="{ label: 'label' }"
      @addBtn="add"
      @removeBtn="remove"
      :mode="mode"
      height="450px"
      filter
      openAll
    >
    </tree-transfer>
    <dragup
      class="list_dragup"
      :type="'end'"
      @dragEnter="dragEnter"
      @dragLeave="dragLeave"
      @dragDrop="dragDrop"
      @dragOver="dragOver"
    >
      <div class="list">
        <div
          class="tool_list"
          v-for="(toolBut, index) in config.fastBut"
          :key="index"
          v-dragging="{ item: toolBut, list: config.fastBut, group: 'toolBut' }"
        >
          <div class="center">
            <span class="iconfont list_close" @click="removeList(index)"
              ><i></i
            ></span>
            <span class="iconfont" v-html="toolBut.iconCode"></span>
            <a>{{ toolBut.label }}</a>
          </div>
        </div>
        <div class="tool_list add" @click="openAddPage">
          <div class="center">
            <span class="iconfont">&#xe999;</span>
            <a>添加</a>
          </div>
        </div>
      </div>
    </dragup>
    <!-- <div class="info">
      <p>
        共 <span>{{ tools.length }}</span> 个分组
      </p>
    </div> -->
    <div class="list" v-for="(tool, index) in tools" :key="index">
      <div class="list_title">
        <!-- <span @click="tool.visible = !tool.visible" class="list_click">{{
          getListState(tool)
        }}</span> -->
        <span class="iconfont" v-html="tool.iconCode"></span>
        <p>{{ tool.label }}</p>
      </div>
      <div v-if="tool.visible">
        <div
          class="tool_list"
          v-for="(toolBut, indexs) in tool.subItems"
          :key="indexs"
        >
          <dragup
            @dragStart="dragStart"
            @dragEnd="dragEnd"
            :datas="toolBut"
            v-if="isInfastBut(toolBut.id)"
          >
            <div class="center">
              <span class="iconfont" v-html="toolBut.iconCode"></span>
              <a>{{ toolBut.label }}</a>
            </div>
          </dragup>
          <div class="center infast" v-else>
            <span class="iconfont" v-html="toolBut.iconCode"></span>
            <a>{{ toolBut.label }}</a>
          </div>
        </div>
      </div>
    </div>
    <div class="add_box" v-show="addPage.open">
      <div class="add_box_close" @click="addPage.open = !addPage.open"></div>
      <div class="add_box_body">
        <div class="add_title">
          自定义按钮
          <span class="iconfont" @click="closeAddPage"></span>
        </div>
        <div class="add_list">
          <label>工具名称：</label>
          <input class="txt" type="txt" v-model="addPage.data.label" />
        </div>
        <div class="add_list">
          <label>图标代码：</label>
          <input class="txt icon" type="txt" v-model="addPage.data.iconCode" />
          <span class="iconfont" v-html="getIcon()"></span>
        </div>
        <div class="add_list">
          <label>工具ID：</label>
          <input class="txt" type="txt" v-model="addPage.data.id" />
        </div>
        <div class="add_list">
          <label>功能类型：</label>
          <select v-model="addPage.data.type">
            <option value="widget">微件</option>
            <option value="">方法</option>
          </select>
        </div>
        <div class="add_list">
          <label>工具锁定：</label>
          <span
            class="cilckR"
            @click="lockClick"
            :class="{ active: addPage.data.lock }"
          ></span>
        </div>
        <div class="add_list">
          <a class="ent" @click="dataPush">确定</a>
          <a class="close" @click="addPage.open = !addPage.open">取消</a>
        </div>
      </div>
    </div>
  </div>
  <!--<div class="color-list">
        <div
            class="color-item"
            v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
            :key="color.text"
        >{{color.text}}</div>
    </div>-->
</template>
<script>
import VueDND from "awe-dnd";
import dragup from "../components/dragup";
import treeTransfer from "el-tree-transfer"; // 引入
Vue.use(VueDND);

export default {
  components: {
    dragup,
    treeTransfer,
  },
  data() {
    return {
      // 树形穿梭框
      mode: "transfer", // transfer addressList
      fromData: [
        {
          id: "1",
          pid: 0,
          label: "工具栏",
          children: [
            {
              id: "1-1",
              pid: "1",
              label: "快捷",
              children: [
                {
                  id: "1-1-1",
                  pid: "1-1",
                  children: [],
                  label: "",
                },
              ],
            },
            {
              id: "1-2",
              pid: "1",
              label: "查询",
              children: [
                {
                  id: "1-2-1",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-1",
                },
                {
                  id: "1-2-2",
                  pid: "1-2",
                  children: [],
                  label: "二级 1-2-2",
                },
              ],
            },
          ],
        },
      ],
      toData: [],
      // Switch框
      value1: false,
      value2: true,
      // ------------
      config: {
        hideTitle: false,
        fastBut: [],
      },
      tools: [],
      addPage: {
        open: false,
        data: {
          label: "",
          iconCode: "",
          id: "",
          type: "widget",
          lock: true,
        },
      },
    };
  },
  methods: {
    setConfig(data, widgetObj) {
      data.hideTitle ? (this.config.hideTitle = data.hideTitle) : "";
      data.fastBut ? (this.config.fastBut = data.fastBut) : "";
      widgetObj ? (this.widgetObj = widgetObj) : "";
    },
    setWidget(data) {
      this.tools = data;
      console.log(this.tools);
    },
    lockClick() {
      this.addPage.data.lock = !this.addPage.data.lock;
    },
    getConfig() {
      return {
        fastBut: this._returnData(this.config.fastBut),
        hideTitle: this.config.hideTitle,
      };
    },
    removeList(index) {
      this.config.fastBut.splice(index, 1);
    },
    isInfastBut(id) {
      for (let i = 0; i < this.config.fastBut.length; i++) {
        if (id === this.config.fastBut[i].id) {
          return false;
        }
      }
      return true;
    },
    getListState(tool) {
      if (typeof tool.visible === "undefined") {
        this.$set(tool, "visible", true);
      } else {
        if (tool.visible) {
          return "-";
        } else {
          return "+";
        }
      }
    },
    openAddPage() {
      this.addPage.open = true;
      this.addPage.data = {
        label: "",
        iconCode: "",
        id: "",
        type: "widget",
        lock: true,
      };
    },
    dataPush() {
      this.addPage.open = false;
      this.config.fastBut.push(this.addPage.data);
    },
    closeAddPage() {
      this.addPage.open = false;
    },
    getIcon() {
      if (
        this.addPage.data.iconCode &&
        this.addPage.data.iconCode.indexOf("&") == 0
      ) {
        return this.addPage.data.iconCode;
      }
    },
    _returnData(data) {
      let obj = [];
      data.forEach((item) => {
        let listdata = {};
        listdata.label = item.label;
        listdata.iconCode = item.iconCode;
        listdata.id = item.id;
        listdata.type = item.type;
        listdata.lock = item.lock || false;
        if (item.subItems) {
          listdata.subItems = this._returnData(item.subItems);
        }
        obj.push(listdata);
      });
      return obj;
    },
    dragStart(data) {
      this.dragData = data;
    },
    dragEnd() {
      this.dragData = "";
    },
    /*
        addListener(){
            this.$el.children[1].addEventListener('dragover', this.dragOver);
            this.$el.children[1].addEventListener('dragleave', this.dragLeave);
            this.$el.children[1].addEventListener('dragenter', this.dragEnter);
            this.$el.children[1].addEventListener("drop", this.dragDrop);
        },*/
    dragOver(data, ev) {},
    dragLeave(data, ev) {},
    dragEnter(data, ev) {},
    dragDrop(data, ev) {
      this.config.fastBut.push(this.dragData);
    },
  },
  watch: {
    config: {
      handler(news) {
        if (this.widgetObj && this.widgetObj.setConfig) {
          this.widgetObj.setConfig(news);
        }
      },
      deep: true,
    },
  },
  mounted() {},
  // 树形穿梭框方法
  // 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
  changeMode() {
    if (this.mode == "transfer") {
      this.mode = "addressList";
    } else {
      this.mode = "transfer";
    }
  },
  // 监听穿梭框组件添加
  add(fromData, toData, obj) {
    // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的        {keys,nodes,halfKeys,halfNodes}对象
    // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
    console.log("fromData:", fromData);
    console.log("toData:", toData);
    console.log("obj:", obj);
  },
  // 监听穿梭框组件移除
  remove(fromData, toData, obj) {
    // 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
    // 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
    console.log("fromData:", fromData);
    console.log("toData:", toData);
    console.log("obj:", obj);
  },
};
</script>
<style>
p {
  margin: 0;
  padding: 0;
}
.toolbarConfig {
  width: 100%;
  height: 100%;
  padding: 0px 17px;
  box-sizing: border-box;
  overflow: auto;
  position: relative;
  user-select: none;
}
.list {
  width: 100%;
  /* float: left; */
  display: flex;
  align-items: center;
  margin: 5px 0;
  line-height: 26px;
  color: #4e5157;
}
.list p {
  color: #4e5157;
  font-size: 12px;
  line-height: 26px;
  float: left;
}
.cilckR {
  width: 12px;
  height: 12px;
  margin-top: 7px;
  border-radius: 50%;
  transition: 0.3s ease-in;
  border: solid 1px #e0e1e2;
  cursor: pointer;
  box-sizing: border-box;
  float: left;
}
.cilckR.active {
  background: #0098ff;
  border: solid 1px #0098ff;
}
.tool_list {
  width: 72px;
  height: 68px;
  margin: 0 10px 10px 0;
  float: left;
  background: #f8f9fa;
  display: table;
  position: relative;
}
.tool_list a {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #4e5157;
  line-height: 12px;
  float: left;
  margin-top: 8px;
}
.tool_list span {
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #7c848e;
  height: 16px;
  float: left;
  line-height: 16px;
}
.center {
  display: table-cell;
  vertical-align: middle;
}
.info {
  width: 100%;
  float: left;
}
.info p {
  line-height: 26px;
  font-size: 12px;
  color: #4e5157;
}
.info span {
  color: #ff6600;
  font-size: 14px;
  line-height: 26px;
}
.list_title {
  width: 100%;
  float: left;
  margin: 5px 0;
}
.list_click {
  line-height: 26px;
  font-size: 16px;
  color: #4e5157;
  margin-right: 9px;
  float: left;
}
.list_title .iconfont {
  line-height: 26px;
  font-size: 16px;
  color: #4e5157;
  margin-right: 6px;
  float: left;
}
.list_title p {
  line-height: 26px;
  font-size: 12px;
  color: #4e5157;
}
.add_box_body {
  width: 260px;
  height: 260px;
  position: absolute;
  top: calc(50% - 130px);
  left: calc(50% - 130px);
  overflow: auto;
  background: #fff;
}
.add_box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.add_title {
  width: 100%;
  height: 36px;
  line-height: 36px;
  padding: 0 10px;
  box-sizing: border-box;
  background: #f8f9fa;
  font-size: 14px;
  color: #4e5157;
  float: left;
  margin-bottom: 5px;
}
.add_list {
  width: 100%;
  float: left;
  padding: 0 10px;
  margin: 5px 0;
  height: 26px;
  line-height: 26px;
  text-align: center;
  box-sizing: border-box;
}
.add_box_close {
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.15);
}
.add_list label {
  width: 70px;
  line-height: 26px;
  text-align: left;
  font-size: 12px;
  color: #4e5157;
  float: left;
}
.add_list input.txt {
  width: calc(100% - 70px);
  float: left;
  outline: 0;
  border: solid 1px #4e5157;
  color: #4e5157;
  background: none;
  font-size: 12px;
  box-sizing: border-box;
  line-height: 26px;
  height: 26px;
  text-indent: 5px;
  border-radius: 3px;
}
.add_list .txt.icon {
  width: calc(100% - 70px - 26px);
}
.add_list select {
  width: calc(100% - 70px);
  float: left;
  outline: 0;
  border: solid 1px #4e5157;
  color: #4e5157;
  background: none;
  font-size: 12px;
  box-sizing: border-box;
  line-height: 26px;
  height: 26px;
  text-indent: 5px;
  border-radius: 3px;
}
.add_list span.iconfont {
  width: 26px;
  height: 26px;
  font-size: 16px;
  color: #4e5157;
  text-align: center;
  float: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.infast {
  border: solid 1px #aaa;
}
.add_list a {
  width: 50px;
  height: 26px;
  background: #3385ff;
  border-radius: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
}
.add_list a.close {
  color: #f8f9fa;
}
.toolbarConfig .list_dragup {
  width: 100%;
  height: auto;
}
.tool_list span.list_close {
  width: 12px;
  height: 12px;
  background: #3385ff;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
}
.tool_list span.list_close i {
  width: 8px;
  height: 2px;
  margin: 5px 2px;
  border-radius: 1px;
  background: #fff;
  float: left;
}
/* Switch选项框 */
.el-switch__label * {
  line-height: 1;
  font-size: 12px;
  display: inline-block;
}
.el-switch__core {
  height: 15px;
}
.el-switch__core::after {
  width: 14px;
  height: 14px;
  top: 0;
  left: 0;
}
.el-switch.is-checked .el-switch__core::after {
  left: 100%;
  margin-left: -13px;
}
/* 穿梭框 */
/* 头部样式 */
.wl-transfer .transfer-title {
  background-color: #f1f3f5;
  margin-top: 0px;
}
/* 按钮样式 */
/* .el-button + .el-button {
  display: flex;
  width: 90px;
  position: relative;
  left: -10px;
} */
/* 主体框样式 */
.wl-transfer .transfer-left,
.wl-transfer .transfer-right {
  border: 1px solid #e3e4e5 !important;
}
/* 内容区域样式 */
/* .el-transfer-panel__list.is-filterable {
  height: auto; */
/* padding-top: 0; */
/* } */
/* 搜索框内容样式 */
/* .el-transfer-panel__filter:first-child {
  display: none;
} */
</style>  